<template>
  <div class="speech">
    <!-- <h1 style="color: #f66">厕所预警</h1> -->
    <div class="topSearch">
      <div class="demo-date-picker">
        <div class="block">
          <!-- <span class="demonstration">Default</span> -->
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            range-separator="To"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </div>
        <!-- :size="size" -->
        <label class="font18 color-font5">关键词：</label>
        <el-input v-model="input" style="width: 240px" placeholder="请输入关键字" />
        <el-button type="primary" class="searchBtn">
          <el-icon style="color: #00c4d7 !important"><Search /></el-icon>
          <span class="searchTxt">搜索</span>
        </el-button>
      </div>
    </div>

    <div class="tableBox">
      <el-table :data="tableData" height="calc(100% - 35px)" style="width: 100%">
          <el-table-column prop="id" label="序号" width="180"/>
          <el-table-column prop="voiceText" label="预警关键词" width="180"/>
          <el-table-column prop="voicePath" label="预警音频"/>
          <el-table-column prop="createTime" label="预警时间"/>
          <el-table-column prop="name" label="位置" />
          <el-table-column prop="status" label="状态" />
          <!-- <el-table-column :prop="status == 0 ? '已处理' : '未处理'" label="状态"  width="180"/> -->
          <el-table-column prop="updateTime" label="处理时间" />
          <el-table-column prop="statusName" label="处理人" />
      </el-table>
      <el-pagination page-size="10" background layout="prev, pager, next" :total="1000" prev-text="上一页" next-text="下一页"/>
    
    </div>
  </div>
</template>
<script setup>

import { ref } from "vue";

const value1 = ref(""); 
const input = ref();

const tableData = [{
    id:1,
    voiceText:'着火',
    voicePath:'',
    createTime:'2024-02-22 10:22:27',
    name:'男生宿舍106',
    status:'1',
    updateTime:'2024-02-22 10:22:27',
    statusName:'admin'
},{
    id:1,
    voiceText:'着火',
    voicePath:'',
    createTime:'2024-02-22 10:22:27',
    name:'男生宿舍106',
    status:'1',
    updateTime:'2024-02-22 10:22:27',
    statusName:'admin'
},{
    id:1,
    voiceText:'着火',
    voicePath:'',
    createTime:'2024-02-22 10:22:27',
    name:'男生宿舍106',
    status:'1',
    updateTime:'2024-02-22 10:22:27',
    statusName:'admin'
},{
    id:1,
    voiceText:'着火',
    voicePath:'',
    createTime:'2024-02-22 10:22:27',
    name:'男生宿舍106',
    status:'1',
    updateTime:'2024-02-22 10:22:27',
    statusName:'admin'
},{
    id:1,
    voiceText:'着火',
    voicePath:'',
    createTime:'2024-02-22 10:22:27',
    name:'男生宿舍106',
    status:'1',
    updateTime:'2024-02-22 10:22:27',
    statusName:'admin'
},{
    id:1,
    voiceText:'着火',
    voicePath:'',
    createTime:'2024-02-22 10:22:27',
    name:'男生宿舍106',
    status:'1',
    updateTime:'2024-02-22 10:22:27',
    statusName:'admin'
},{
    id:1,
    voiceText:'着火',
    voicePath:'',
    createTime:'2024-02-22 10:22:27',
    name:'男生宿舍106',
    status:'1',
    updateTime:'2024-02-22 10:22:27',
    statusName:'admin'
},{
    id:1,
    voiceText:'着火',
    voicePath:'',
    createTime:'2024-02-22 10:22:27',
    name:'男生宿舍106',
    status:'1',
    updateTime:'2024-02-22 10:22:27',
    statusName:'admin'
}]

</script>

<style>

</style>
